<template>
  <div>
    <div class="login-container">
      <div class="login-form">
        <!-- 2 -->
        <img src="@/assets/logo1.png" alt="" class="login-logo" />

        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="30px"
          class="demo-ruleForm"
        >
          <!-- 阻止浏览器默认缓存input的值 -->
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="ruleForm.username"
              autocomplete="off"
              placeholder="请输入账号"
            >
              <i slot="prefix" class="el-icon-mobile-phone"></i>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
              show-password
            >
              <i slot="prefix" class="el-icon-unlock"></i>
              <i slot="suffix" class="el-input__icon el-icon-date"></i>
              <!-- <i slot="suffix" class="el-input__icon el-icon-view" @click="zhenyan"></i> -->
            </el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="checkout">
            <el-input v-model="ruleForm.checkout" placeholder="请输入验证码">
            </el-input>
          </el-form-item>

          <!-- 登入 -->
          <el-form-item>
            <el-button type="primary"
            @click="submitForm('ruleForm')"
              >登入</el-button
            >
          </el-form-item>
        </el-form>
        <img :src="imgsrc" alt="" class="code-image" />
      </div>
    </div>
  </div>
</template>

<script>
import { getloginimg, loginjiekou } from '@/api/user'
export default {
  data () {
    return {
      ruleForm: {
        username: 'admin',
        password: 'admin',
        checkout: ''
      },
      rules: {
        username: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: ['blur', 'change']
          },
          {
            min: 5,
            max: 11,
            message: '长度5到11位哦',
            trigger: ['bluer', 'change']
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^\w{5,11}$/,
            message: '长度5到11位',
            trigger: ['blur', 'change']
          }
        ]
      },
      imgsrc: '',
      suijishu: Math.random().toString(36).substr(2)
    }
  },
  async created () {
    const res = await getloginimg(this.suijishu)
    console.log(res)
    const blob = res.data
    console.log(blob)
    const reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = () => {
      this.imgsrc = reader.result
    }
  },

  methods: {
    async submitForm () {
      // await调用
      await this.$refs.ruleForm.validate()
      const result = await loginjiekou({
        loginName: this.ruleForm.username,
        password: this.ruleForm.password,
        mobile: '',
        code: this.ruleForm.checkout,
        clientToken: this.suijishu,
        loginType: 0,
        account: ''
      })
      console.log(result)
      console.log(result.data.msg)
      if (result.data.success) {
        this.$message({
          type: 'success',
          message: '登入成功了哦'
        })
        this.$router.push('/layout')
      } else {
        this.$message({
          type: 'success',
          message: '用户名或密码,验证码,错误,请重新输入'
        })
      }
    }
  }
}
</script>

<style lang="scss" scope>
.login-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: url("@/assets/bgc.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.login-form {
  width: 518px;
  height: 388px;
  background-color: #fff;
  box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
  border-radius: 10px;
  padding: 76px 35px 0;
  top: 50%;
  left: 50%;
  margin-top: -194px;
  margin-left: -259px;
  position: absolute;
}
.login-logo {
  position: absolute;
  width: 96px;
  height: 96px;
  top: -46px;
  left: 50%;
  margin-left: -48px;
}
::v-deep .el-input__inner {
  height: 52px;
}
.code-image {
  position: absolute;
  top: 200px;
  left: 422px;
  width: 130px;
  height: 40px;
}
</style>
